<template>
  <div>
    <Row :gutter="24">
      <Col span="4">
        <Select v-model="checkedId" @on-change="on_ChangList">
          <Option v-for="(item, index) in topoData" :value="item.id" :key="index">{{ item.name }}</Option>
        </Select>
      </Col>
      <Col span="10" style="display:flex;">
        <span style="line-height: 30px;display: inline-block;color: red;">注：</span>
        <span style="line-height: 30px;">黑色--正常，紫色--故障，红色--离线，灰色--异常</span>
      </Col>
    </Row>
  </div>
</template>

<script>
import graphApi from "../../../api/graph.api";
export default {
  name:"deviceTree",
  data(){
    return {
      checkedId: "",
      topoData: []
    }
  },
  methods:{
    //自动加载列表最后一个xml文件
    autoLoad(){
      graphApi.list().then(res => {
        this.topoData = res.data.data;
        this.checkedId = this.topoData[this.topoData.length - 1].id;
        this.$emit('send_selectID', this.checkedId); //传给父组件: lookStatus.vue
      })  
    },
    //切换选项加载xml文件
    on_ChangList(id) {
      if(id){
        this.$emit('send_selectID', id); //传给父组件: lookStatus.vue
      }
    }
  },
  created(){},
  mounted(){
    this.autoLoad(); // 自动加载列表最后一个xml文件
  },
  destroyed(){
    // 销毁 panZoomTiger 实例
    this.$destroy();  
    this.topoData = [];
  }
}
</script>